<template>
  <div class="layout" :class="menuMode">
    <TopMenu
        ref="sideMenu"
        v-if="menuMode == 'horizontal'&&!windowmicroApp"
        :routeList="routeList"
        :activeNames="activeNames"
        @on-select="turnToPage">
      <div style="height: 100%;" slot="logo">
        <div style="background:var(--left-menu-bgcolor);width:200px;height:100%;" v-show="!showSysTopLogo"></div>
        <img :src="sysTopLogo" alt="LOGO" @error="hideSysTopLogo()" v-if="showSysTopLogo" style="max-width:314px;max-height:60px;vertical-align: middle;"/>
      </div>
      <div class="extra-info" slot="info">
        <Poptip
            placement="bottom"
            width="400"
            style="line-height: initial;z-index: initial"
            id="boardPoptip"
            v-model="visiblePop"
            transfer
        >
          <span style="margin-left:30px;">
            <Badge :count="notReadCount" class="badge-wrap">
              <!-- <Icon
                type="ios-notifications-outline"
                :size="18"
                style="font-weight:bold"
                color="rgb(91, 54, 194)"
              /> -->
              <img
                  src="../../assets/mainPage/notice.png"
                  style="vertical-align: middle;"
                  alt="退出"
              />
            </Badge>
          </span>
          <div class="api" slot="content">
            <boardlist type="list" @hidePop="hidePop" @showPop="showPop"></boardlist>
          </div>
        </Poptip>
        <!-- <Poptip transfer confirm title="确定要退出此用户吗？" placement="left" @on-ok="Signout">
          <div class="signout-wrap">
            <img
              src="../../assets/mainPage/signout.png"
              style="vertical-align: middle;"
              alt="退出"
            />
          </div>
        </Poptip> -->
        <Poptip placement="bottom" transfer  trigger="hover" width="280">
          <div class="avatar-name-wrap">
            <!-- <img
              id="globalAvatar"
              :src="avatar"
              style="width:50px;height:50px;border-radius: 50%"
            /> -->
            <Avatar v-show="!showDefaultAvatar" :src="avatar" @on-error="setDefAvatar"/>
            <Avatar v-show="showDefaultAvatar">{{nickname.slice(0,1).toUpperCase()}}</Avatar>
            <!-- <p style="margin: 10px 0;text-align: center;overflow: hidden;">
              <span id="globalNickName" class="name">{{ nickname }}</span>
            </p> -->
          </div>
          <template #content>
            <div style="font-size: 14px;padding: 6px;">
              <div class="userInfo" style="display: flex;align-items: center;overflow: hidden;">
                <div class="avatar-name-wrap" style="margin-right: 10px;">
                  <Avatar v-show="!showDefaultAvatar" size="large" :src="avatar" @on-error="setDefAvatar"/>
                  <Avatar v-show="showDefaultAvatar" size="large">{{nickname.slice(0,1).toUpperCase()}}</Avatar>
                </div>
                <div style="overflow: hidden;display: flex;flex-direction: column;">
                  <h3 class="text-ellipsis">{{nickname}}</h3>
                  <p class="text-ellipsis">{{roleTxt}}</p>
                </div>
              </div>
              <Divider style="margin:10px 0"></Divider>
              <div @click="Signout" class="signout-wrap" :class="signoutLoading ? 'disabled' : ''">
                <span>退出登录</span>
                <img
                    src="../../assets/mainPage/signout.png"
                    style="vertical-align: middle;"
                    alt="退出"
                /></div>
              <div @click="gotoUserPage" class="signout-wrap">
                <span>个人信息</span></div>
            </div>
          </template>
        </Poptip>
      </div>
    </TopMenu>
    <Header class="layout-header-bar" v-if="menuMode == 'vertical'&&!windowmicroApp">
      <!-- <Icon @click="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon> -->
      <!-- ~@/assets/mainImage/logo.png -->
      <div style="height: 100%;">
        <div style="background:var(--left-menu-bgcolor);width:200px;height:100%;" v-show="!showSysTopLogo"></div>
        <img :src="sysTopLogo" alt="LOGO" @error="hideSysTopLogo()" v-if="showSysTopLogo" style="max-width:314px;max-height:60px;"/>
      </div>
      <!-- <div class="notice-style"> -->
      <div class="extra-info">
        <Poptip
            placement="bottom"
            width="400"
            style="line-height: initial;z-index: initial"
            id="boardPoptip"
            v-model="visiblePop"
            transfer
        >
            <span>
              <Badge :count="notReadCount" class="badge-wrap">
                <!-- <Icon
                  type="ios-notifications-outline"
                  :size="18"
                  style="font-weight:bold"
                  color="rgb(91, 54, 194)"
                /> -->
                <img
                    :src="noticeImage"
                    style="vertical-align: middle;"
                    alt=""
                />
              </Badge>
            </span>
          <div class="api" slot="content">
            <boardlist type="list" @hidePop="hidePop" @showPop="showPop"></boardlist>
          </div>
        </Poptip>
        <!-- <Poptip transfer confirm title="确定要退出此用户吗？" placement="left" @on-ok="Signout">
          <div class="signout-wrap">
            <img
              src="../../assets/mainPage/signout.png"
              style="vertical-align: middle;"
              alt="退出"
            />
          </div>
        </Poptip> -->
        <Poptip placement="bottom" transfer  trigger="hover" width="280">
          <div class="avatar-name-wrap">
            <!-- <img
              id="globalAvatar"
              :src="avatar"
              style="width:50px;height:50px;border-radius: 50%"
            /> -->
            <Avatar v-show="!showDefaultAvatar" :src="avatar" @on-error="setDefAvatar"/>
            <Avatar v-show="showDefaultAvatar">{{nickname.slice(0,1).toUpperCase()}}</Avatar>
            <!-- <p style="margin: 10px 0;text-align: center;overflow: hidden;">
              <span id="globalNickName" class="name">{{ nickname }}</span>
            </p> -->
          </div>
          <template #content>
            <div style="font-size: 14px;padding: 6px;">
              <div class="userInfo" style="display: flex;align-items: center;overflow: hidden;">
                <div class="avatar-name-wrap" style="margin-right: 10px;">
                  <Avatar v-show="!showDefaultAvatar" size="large" :src="avatar" @on-error="setDefAvatar"/>
                  <Avatar v-show="showDefaultAvatar" size="large">{{nickname.slice(0,1).toUpperCase()}}</Avatar>
                </div>
                <div style="overflow: hidden;display: flex;flex-direction: column;">
                  <h3 class="text-ellipsis">{{nickname}}</h3>
                  <p class="text-ellipsis">{{roleTxt}}</p>
                </div>
              </div>
              <Divider style="margin:10px 0"></Divider>
              <div @click="Signout" class="signout-wrap" :class="signoutLoading ? 'disabled' : ''">
                <span>退出登录</span>
                <img
                    :src="logooutImage"
                    style="vertical-align: middle;"
                    alt="退出"
                /></div>
              <div @click="gotoUserPage" class="signout-wrap">
                <span>个人信息</span></div>
            </div>
          </template>
        </Poptip>
      </div>
      <!-- </div> -->
    </Header>
    <Layout class="layout-wrapper">
      <Sider hide-trigger class="leftMenu qax-leftMenu" :class="projectName == 'qax' ? 'qax-leftMenu':''" v-if="menuMode == 'vertical'&&!windowmicroApp">
        <!-- <div class="logo-wrap">
          <img src="~@/assets/mainImage/logo.png" alt="" @error="hideSysiconLogo()"/>
          <img :src="sysTopLogo" alt="" @error="hideSysTopLogo()" v-if="showSysTopLogo" />
        </div> -->
        <!-- {{ routeList }} -->
        <side-menu
            ref="sideMenu"
            :routeList="routeList"
            :activeNames="activeNames"
            @on-select="turnToPage"
            :height="setSiderHei"
        ></side-menu>
        <div class="side-bottom-img" v-if="projectName !== 'qax'">
          <!-- <img
            :src="sysLogo"
            alt=""
            @error="hideSysLogo()"
            :style="showSysLogo ? '' : 'visibility: hidden;'"
          /> -->
          <div class="release">
            v1.0.0
            <!-- {{systemVersion}} -->
          </div>
        </div>
      </Sider>

      <Layout class="left-lay-content">
        <BreadNav :data="breadList" v-show="breadList.length > 1&&!windowmicroApp" style="margin: 20px 30px;"></BreadNav>
        <Content class="desig-table-style" :class="breadList.length > 1 ? 'hasBread' : ''" :style="{width:windowmicroApp?'100%':'calc(100vw - 200px)'}">
          <router-view />
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import boardlist from '@/view/boardcast/boardcast';
import $ from 'jquery';
import cookieUse from '@/libs/cookie.js';
import encryption from '@/libs/encryption.js';
import { baseInfo, logout, getdatalist, getLogoImg, queryLogoImg } from '@/api/login.js';
import BreadNav from '@/components/common/bread-nav';
import webScoket from '@/mixin/webScoket';
import baseURL from '@/api/index';
import { mapState, mapMutations, mapGetters } from 'vuex';
import SideMenu from '@/components/side-menu/newmenu.vue';
import TopMenu from '@/components/side-menu/menu-top.vue';
// import SideMenuQax from '@/components/side-menu/menu-qax.vue';
import { getServerTime } from '@/api/dict';
import { imagePathMixin } from '@/mixin/study'
// 用于控制裁判的哪些菜单可用于展示与跳转，保存的都是路由列表的key字段
const REFEREE_MENU_LIST = ['referee', 'baseInfo', 'bulletin', 'bulletinReceive', 'bulletinSend'];

export default {
  components: {  SideMenu,BreadNav,TopMenu ,boardlist},
  mixins: [webScoket],
  data() {
    return {
      windowmicroApp:window.microApp,
      testMenu:[
        {url:'exam',label:'考试'},
        {url:'testPaper',label:'试卷'},

        {url:'createExp',label:'创建课件'},
        {url:'videoLearn',label:'视频自学'},
        {url:'videoExp',label:'理论课件'},


        {url:'coursewareExp',label:'文本课件'},
        {url:'experiment',label:'实操课件'},

        {url:'course',label:'课程'},
        {url:'class',label:'教学班'},
      ],
      // 用户信息
      // USER_ID:'',
      // role:'',
      // route list
      // routeList:[],
      // 当前路由所在位置
      activeNames: [], //一级,二级,三级
      showMenu: false,
      // 设置语言
      langFlag: false, // false为中文  true为英文
      lanText: '',
      visiblePop: false,
      // 是否是裁判角色
      isReferee: false,
      setAvater: '',
      // 设置菜单栏高度
      setSiderHei: 'auto',
      //系统logo
      sysLogo: '',
      showSysLogo: true,
      sysTopLogo: '',
      iconLogo: '',
      showSysTopLogo: false,
      showMenuLogo: true,
      logoList: [],
      showDefaultAvatar:false,
      signoutLoading:false,
      timess:1000,
    };
  },
  computed: {
    ...mapGetters(['breadList']),
    ...mapState(['projectName', 'routeList']),
    ...mapState('user', ['nickname', 'avatar','roleTxt']),
    ...mapState('board', ['notReadCount']), //未读消息数
    ...mapState('style', {
      menuMode: ({ themeConfig }) => {
          return themeConfig.menuMode === 'horizontal' ?  'horizontal' : 'vertical';
      },
      noticeImage: ({ themeConfig }) => {
        return themeConfig.noticeImage;
      },
      logooutImage: ({ themeConfig }) => {
        return themeConfig.logooutImage;
      },
    }),
  },
  async created() {
   
    this.getUserInfo()
    // this.queryLogoImg()
    await this.setCloudType(sessionStorage.getItem('cloud_type') || 'common');
    // 从cookie中拿token
    let getToken = cookieUse.getCookie('desig-token') || '';
    let getLang = cookieUse.getCookie('desig-lang') || 'zh';
    if (getToken === '') {
      // this.$router.push({
      //   path: '/login'
      // });
      window.openLogin(this.$router)
      
    } else {
      this.webSocketStatus();
      this.$Notice.destroy();
      // 看到main.js里面加了getUserInfo请求，重复了，这里去掉，把相关赋值都放到store/user中去
      // await this.getUserInfo().then()
      // if (getLang === 'zh') {
      //   this.langFlag = true;
      //   this.lanText = 'EN';
      // } else if (getLang === 'en') {
      //   this.langFlag = false;
      //   this.lanText = '中';
      // }
      this.$i18n.locale = 'zh';
      //配置的菜单路由列表
      // let routeList = this.$router.options.routes[1].children
      // //渲染菜单栏(后台的菜单数据)
      // getdatalist({type:'designer'}).then(res => {
      // 	if (res.data.code == 1) {
      //         let menulist = res.data.data;
      //         let distributedRange= menulist.some(item=>{
      //            return item.key=='distributedRange'
      //         })
      //         this.$store.commit('user/serDistributedRange',distributedRange)
      //         let allMenuList = this.flatMenuList(menulist,Infinity);
      //         // 原接口 运维控制此字段，新接口返回直接展示，无hidden字段，扁平化处理后添加此字段保持页面逻辑，
      //         allMenuList.forEach(item=>{
      //             this.$set(item,'hidden',true)
      //         })
      //         this.dealRoute(routeList,'',allMenuList); //控制菜单显示隐藏，和菜单名称
      //     	this.routeList = routeList;
      //     }
      // })
      let name = this.$route.name;
      this.setULHei(name);
    }
  },
  mounted() {
   
    let routess = this.$router.options.routes
    let testMenu=[]
    routess.forEach(r1=>{
      if(r1.name==='main'){
        let rss = r1.children
        rss.forEach(r2=>{
          if(r2.meta.show!=false)
          testMenu.push({url:r2.name,label:r2.meta.title})
        })
        // {url:'guide',label:'课件指导书'},
        
      }
    })
    this.testMenu = testMenu
    
    
    
    this.getLogo();
    this.getServerTime();
    // this.sysLogo = `${baseURL}/sdn/sys/menu/sysImage?sysType=2&label=1`
    // this.sysTopLogo = `${baseURL}/sdn/sys/menu/sysImage?sysType=2&label=4`
    // this.iconLogo = `${baseURL}/sdn/sys/menu/sysImage?sysType=2&label=2`
    this.getMicrodata()
  },
  watch: {
    $route(to, from) {
      const { name, matched, meta } = to;
      this.activeNames = matched.map((item) => item.name).filter((item) => item !== 'main');
      this.setULHei(name);
    }
  },
  beforeDestroy() {
    clearTimeout(this.serverTimeout);
  },
  methods: {
    ...mapMutations(['setCurrentTime']),
    ...mapMutations(['setCloudType']),

    getUserInfo() {
      let _this = this;
      baseInfo()
      .then((res) => {
        if (res.data.code === 1) {
          let userId = res.data.data.id;
          let nickname = res.data.data.nickname;
          let companyName = res.data.data.companyName;
          let companyId = res.data.data.companyId;
          let initPwd = res.data.data.initialPassword;
          let avatar = res.data.data.avatar || require('@/assets/globalIcon/defult.jpg');
          let userName = res.data.data.username;
          let type = res.data.data.type;
          let role = res.data.data.role;
          let systemId = res.data.data.systemId
          // 单位管理员或者单位设计师
          let isRootDesigner;
          if (res.data.data.role && res.data.data.role === 'leader') {
            isRootDesigner = true;
          } else {
            isRootDesigner = false;
          }
          let November = {
            systemId:systemId,
            userId: userId,
            userName: userName,
            nickname: nickname,
            companyName: companyName,
            companyId: companyId,
            initPwd: initPwd,
            avatar: avatar,
            isRootDesigner: isRootDesigner,
            isReferee: role === 'referee' ? true : false,
            distributed: res.data.data.distributed
          };
        
          sessionStorage.setItem('November', encryption.SelfUseEncrypt(JSON.stringify(November)));
          _this.$router.push({
            path: '/main'
          });
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 3
          });
          // todo 跳转到主服务的登录页面啊啊啊啊
          
        }
      })
      .catch((err) => {
        console.log(err);
      });
    },
    
    getMicrodata(){
     
      let _this = this
      if(window.microApp && window.microApp.addDataListener)
      window.microApp.addDataListener((data)=>{
        console.log('main页面来自基座应用的数据---------', data)
        if(data && data.name) _this.turnToPage(data.name)
      }, true)
    
    },
    setDefAvatar(event) {
      this.showDefaultAvatar = true;
    },
    getServerTime() {
      let server = new Date().getTime();
      let runTime = performance.now();
      getServerTime().then(({ data = {} }) => {
        if (data.code === 1) {
          server = data.attribute.currentTime;
          this.setCurrentTime(server);
        }
      });
      clearInterval(this.serverInterval);
      this.serverInterval = setInterval(() => {
        let runTime2 = performance.now();
        this.setCurrentTime(server + (runTime2 - runTime));
      }, 200);
      clearTimeout(this.serverTimeout);
      this.serverTimeout = setTimeout(() => {
        this.getServerTime();
      }, 30000);
    },
    turnToPage(name) {
     
        if (name == 'login') {
          cookieUse.setCookie('desig-token', '', 0);
          cookieUse.setCookie('Authorization', '', 0);
          sessionStorage.removeItem('November');
        }
        
        setTimeout(()=>{
          this.$router.push({
            path: '/' + name
          });
          this.timess =0
        },this.timess)
    },
    // 菜单栏高度
    setULHei(name) {
      if (name === 'homer') {
        this.showMenuLogo = true;
        this.setSiderHei = 'calc(100% - 75px)';
      } else {
        this.showMenuLogo = false;
        this.setSiderHei = 'calc(100% - 75px)';
      }
    },
    gotoUserPage(){
      this.$router.push({
        name:'baseInfo'
      })
    },
    // 退出登录
    Signout() {
      if(this.signoutLoading){
        return
      }
      this.signoutLoading = true;
      logout()
        .then((res) => {
          if (res.data.code === 1) {
            cookieUse.setCookie('desig-token', '', 0);
            cookieUse.setCookie('Authorization', '', 0);
            sessionStorage.removeItem('November');
            // this.$router.push({
            //   path: '/login'
            // });
            window.openLogin(this.$router)
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 2
            });
          }
          this.signoutLoading = false;
        })
        .catch((err) => {
          this.signoutLoading = false;
          this.$Message.error('服务器连接失败！');
        });
    },
    hidePop() {
      this.visiblePop = false;
    },
    showPop() {
      this.visiblePop = true;
    },
    hideSysLogo() {
      this.showSysLogo = false;
    },
    hideSysTopLogo() {
      console.log('顶部图标渲染错误')
      this.showSysTopLogo = false;
    },
    hideSysiconLogo() {
      //删除标签缩略图
      // document.querySelector("link[rel='shortcut icon']").remove();
    },

    // 获取系统浏览器标签的图标
    getLogo() {
      let params = {
        systemType: 'designer'
      };
      getLogoImg(params)
        .then((res) => {
          if (res.data.code === 1) {
            let getData = res.data.data;
            let top = getData.find((item) => item.logoType == 'top');
            let bottom = getData.find((item) => item.logoType == 'bottom');
            let url = getData.find((item) => item.logoType == 'url');
            if (bottom) {
              this.sysLogo = bottom ? '/files' + bottom.logo : '';
              if (bottom.hidden == 'enable') {
                // 如果返回了logo信息进行展示
                this.showSysLogo = true;
              } else {
                this.showSysLogo = false;
              }
            }
            if (top) {
              this.sysTopLogo = top ? '/files' + top.logo : '';
              if (top.hidden == 'enable') {
                console.log('顶部图标显示',this.sysTopLogo)
                this.showSysTopLogo = true;
              } else {
                this.showSysTopLogo = false;
              }
            }
            if (url) {
              this.iconLogo = '/files' + url.logo;

              if (url.hidden == 'enable') {
                document.getElementById('favicon').setAttribute('href', '/files' + url.logo);
              } else {
                document
                  .getElementById('favicon')
                  .setAttribute('href', '/files' + url.logo + '?v=' + Math.random() * 100);
              }
            }
          }
        })
        .catch((err) => {});
    },

    // 获取数据
    queryLogoImg() {
      queryLogoImg({ systemType: 'designer' })
        .then((res) => {
          if (res.data.code == 1) {
            this.logoList = res.data.data;
          } else {
            console.log('获取数据失败');
          }
        })
        .catch((errer) => {
          console.log('获取数据失败');
        });
    },
    // 获取系统浏览器标签的图标
    getLogo12() {
      let params = {
        systemType: 'designer'
      };
      getLogoImg(params)
        .then((res) => {
          if (res.data.code === 1) {
            let getData = res.data.data;
            // this.sysLogo = 'data:image/png;base64,' + getData[0].logo // 底部
            // this.sysTopLogo = 'data:image/png;base64,' + getData[1].logo // 菜单头部
            // this.iconLogo = 'data:image/png;base64,' + getData[2].logo // ico 浏览器图标
            let bot = this.getBottom(getData, this.logoList, 'bottom');
            let top = this.getBottom(getData, this.logoList, 'top');
            let url = this.getBottom(getData, this.logoList, 'url');
            let name = this.getName(getData, this.logoList, 'sysName');
            this.sysLogo = bot; // 底部
            this.sysTopLogo = top; // 菜单头部
            this.iconLogo = url; // ico 浏览器图标
            if (bot) {
              // 如果返回了logo信息进行展示
              this.showSysLogo = true;
            }
            if (top) {
              this.showSysTopLogo = true;
            }
            if (url) {
              document.getElementById('favicon').setAttribute('href', url);
            } else {
              document
                .getElementById('favicon')
                .setAttribute('href', url + '?v=' + Math.random() * 100);
            }
          }
        })
        .catch((err) => {});
    },
    getBottom(data1, data2, type) {
      let img = '';
      if (data1.length > 0 || data2.length > 0) {
        let logoType1 = data1.filter((d) => d.logoType == type); // 运维设计
        let logoType2 = data2.filter((d) => d.logoType == type); // 单位设计
        if (logoType1.length > 0 && logoType2.length > 0) {
          if (logoType1[0].hidden == 'enable' && logoType2[0].hidden == 'enable') {
            img = '/files' + logoType2[0].logo;
          } else if (logoType1[0].hidden == 'enable' && logoType2[0].hidden == 'disable') {
            img = '/files' + logoType1[0].logo;
          } else if (logoType1[0].hidden == 'disable' && logoType2[0].hidden == 'enable') {
            img = '/files' + logoType2[0].logo;
          } else if (logoType1[0].hidden == 'enable') {
            img = '/files' + logoType1[0].logo;
          } else if (logoType2[0].hidden == 'enable') {
            img = '/files' + logoType2[0].logo;
          } else {
            img = '';
          }
        } else if (logoType1.length > 0 && logoType2.length == 0) {
          if (logoType1[0].hidden == 'enable') {
            img = '/files' + logoType1[0].logo;
          }
        } else if (logoType1.length == 0 && logoType2.length > 0) {
          if (logoType2[0].hidden == 'enable') {
            img = '/files' + logoType2[0].logo;
          }
        }
      } else {
        img = '';
      }
      return img;
    },
    getName(data1, data2, type) {
      let name = '';
      let logoType1 = data1.filter((d) => d.logoType == type); // 运维设计
      let logoType2 = data2.filter((d) => d.logoType == type); // 单位设计

      if (logoType1.length > 0 && logoType2.length > 0) {
        if (logoType1[0].hidden == 'enable' && logoType2[0].hidden == 'enable') {
          name = logoType2[0].sysName;
        } else if (logoType1[0].hidden == 'enable' && logoType2[0].hidden == 'disable') {
          name = logoType1[0].sysName;
        } else if (logoType1[0].hidden == 'disable' && logoType2[0].hidden == 'enable') {
          name = logoType2[0].sysName;
        } else if (logoType1[0].hidden == 'enable') {
          name = logoType1[0].sysName;
        } else if (logoType2[0].hidden == 'enable') {
          name = logoType2[0].sysName;
        } else {
          name = '';
        }
      } else if (logoType1.length > 0 && logoType2.length == 0) {
        if (logoType1[0].hidden == 'enable') {
          name = logoType1[0].sysName;
        } else {
          name = '';
        }
      } else if (logoType1.length == 0 && logoType2.length > 0) {
        if (logoType2[0].hidden == 'enable') {
          name = logoType2[0].sysName;
        } else {
          name = '';
        }
      } else {
        name = '';
      }
      return name;
    }
  }
};
</script>
<style scoped>
.layout {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
.layout.horizontal{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layout .ivu-layout.ivu-layout-has-sider {
  display: flex;
  flex-direction: row;
  /*height:calc(100vh - 60px);*/
}
.layout.vertical .ivu-layout.ivu-layout-has-sider {
  flex-direction: row;
  /*height:calc(100vh - 60px);*/
}
.layout.horizontal .ivu-layout.layout-wrapper {
  flex-direction: column;
  height:calc(100vh - 120px);
}
.left-lay-content {
  overflow-x: hidden;
  overflow-y: auto;
}
.left-lay-content .desig-table-style {
  /*width: calc(100vw - 200px);*/
  /*padding: 30px;*/
}
.left-lay-content .desig-table-style.hasBread  {
  /*padding: 0 30px 30px 30px;*/
}
.horizontal .left-lay-content .desig-table-style{
  /* height: 0; */
  flex: auto;
  width:100%;
}
.left-lay-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.left-lay-content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.left-lay-content::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.vertical .layout-wrapper{
  display: flex;
  flex-direction:row;
  /*height:calc(100vh - 60px);*/
}
.horizontal .layout-wrapper{
  display: flex;
  flex-direction:column;
  overflow: auto;
}
.leftMenu {
  background-color: #ffffff;
  border-radius: 0 25px 25px 0;
  flex-direction: row;
  height: calc(100vh - 60px);
}
.layout-header-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  background: var(--card-body-bgcolor);
  padding: 0 30px 0 0;
  height: 60px;
  line-height: 60px;
}
.extra-info {
  display: flex;
  align-items: center;
}
.extra-info > *{
  margin-left: 20px;
}
.logo-wrap {
  /* width: 100%;
  height: 120px;
  margin: 25px 0;
  text-align: center; */
}
.logo-wrap img {
  height: 64px;
  /* display: inline-block;
  width: 120px;
  height: 120px; */
}
.bgMain {
  display: block !important;
}
.bgTask {
  display: block !important;
}
.bgStutdy {
  display: block !important;
}
.bgExam {
  display: block !important;
}
.bgLesson {
  display: block !important;
}
.bgCom {
  display: block !important;
}
.bgPer {
  display: block !important;
}
.signoutBtn {
  height: 26px;
  width: 60px;
  cursor: pointer;
  /*margin-right: 30px;*/
  line-height: 24px;
  text-align: center;
  border: 1px solid rgb(139, 139, 139);
  border-radius: 20px;
  color: rgb(139, 139, 139);
}
.signoutBtn:hover {
  color: rgb(47, 112, 255);
  border-color: rgb(47, 112, 255);
}
.logoutBtn {
  height: 26px;
  width: 82px;
  cursor: pointer;
  margin-right: 30px;
  line-height: 24px;
  text-align: center;
  border: 1px solid rgb(139, 139, 139);
  border-radius: 20px;
  color: rgb(139, 139, 139);
}
.logoutBtn:hover {
  color: rgb(47, 112, 255);
  border-color: rgb(47, 112, 255);
}
.changeLang {
  cursor: pointer;
  margin-right: 30px;
  height: 24px;
  width: 24px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgb(139, 139, 139);
  color: rgb(139, 139, 139);
  font-size: 14px;
}
.changeLang:hover {
  color: rgb(47, 112, 255);
  border-color: rgb(47, 112, 255);
}
.enLang {
  cursor: pointer;
  margin-right: 30px;
  height: 24px;
  width: 24px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgb(139, 139, 139);
  color: rgb(139, 139, 139);
  font-size: 14px;
}
.enLang:hover {
  color: rgb(47, 112, 255);
  border-color: rgb(47, 112, 255);
}
.ulboard {
  max-height: 60vh;
  overflow-y: auto;
}
.ulboard::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.ulboard::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.ulboard::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.ulboard li {
  border-bottom: 1px solid #e8eaec;
  padding: 12px 0;
  white-space: normal;
}
.side-bottom-img {
  /* width: 100%;
  height: 173px;
  background: url('../../assets/mainPage/side-bottom-img.png') no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0; */
}
.side-bottom-img img {
  width: 175px;
  height: 48px;
  margin-top: 80px;
  margin-left: 10px;
}
.side-bottom-img .release {
  font-weight: bold;
  color: var(--menu-bottom-color);
  text-align: center;
}

.avatar-name-wrap {
  text-align: center;
}
.avatar-name-wrap /deep/ .ivu-avatar{
  background:#468DFF;
}

/* .avatar-name-wrap .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.avatar-name-wrap .name {
  display: inline-block;
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #8f90a6;
  font-size: 14px;
  font-weight: bold;
} */
/* .signout-wrap, */
.badge-wrap {
  line-height: initial;
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  /* background: rgb(239, 235, 249); */
  border: 1px solid var(--divider-color);
  border-radius: 50%;
  cursor: pointer;
}
.signout-wrap {
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  /* text-align: center; */
  /* letter-spacing: 4px; */
  /* margin-right: 20px; */
}
.signout-wrap:hover{
  background: #f4f7ff;
  color:#468dff;
}
.notice-style {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.main-baseinfo {
  background-color: #fff;
  margin: 25px 0;
}
/*qax*/
.qax-leftMenu {
  /* overflow: hidden; */
}
.qax-leftMenu .main-baseinfo {
  background-color: #1D252C;
}
.qax-leftMenu {
  /* background: #1D252C; */
  background: var(--left-menu-bgcolor);
  border-radius: 0;
}
/deep/.qax-leftMenu .ivu-layout-sider-children {
  display: flex;
  flex-direction: column;
}
.disabled{
  cursor: not-allowed;
}
</style>
<style>
#boardPoptip .ivu-poptip-body {
  padding: 0px;
}
/* .desig-table-style .ivu-table-wrapper {
  border: none;
} */
/* .desig-table-style thead tr th {
  background-color: #EEF0F2; 
  color: #546277;
  font-weight: bold;
} */
  /*tr.ivu-table-row-hover td{
 background-color: #EFF5FE;
} */
/* .desig-table-style tbody tr:nth-child(even) td {
  background-color: #f5f8ff;
  border: none;
}
.desig-table-style tbody tr:nth-child(odd) td {
  background-color: #fff;
  border: none;
} */
/* .desig-table-style .ivu-table {
  color: #1D252C;
} */
/* .desig-table-style .ivu-table:before,
.desig-table-style .ivu-table:after {
  background-color: transparent;
} */

.notice-style .ivu-badge-count {
  height: 18px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 3px;
}
.layout .ivu-tag {
  cursor: auto;
}
</style>
